<template>
  <custom-dialog custom-class="custom-web" :title="computedTitle" :width="width" v-model="isVisible"
    :disabled="disabled" :show-close="disabled" :center="center" @close="handleClose">
    <div class="order" v-if="state.order.id">
      <div class="order-header">
        <div class="order-info">
          <div class="order-shop__img"><el-avatar shape="square" :size="22" :src="state.order.shopVo.pic || ''" /></div>
          <div class="order-shop__title">{{ state.order.shopVo.name }}</div>
          <div class="order-time">{{ $timeDisplay('', '', state.order.ctime) }}</div>
          <div class="order-number">订单号：{{ state.order.orderCode }}</div>
        </div>
      </div>
      <el-row :gutter="10" class="order-body" align="middle">
        <el-col :span="13">
          <div class="item-td goods-list" style="text-align: left;">
            <div v-for="goods in state.order.sellVos" :key="goods.id" class="goods-info">
              <el-image style="width: 128px; height: 128px; background-color: #fff;" :src="goods.img" fit="cover" />
              <div class="goods-other">
                <div>{{ $numberPriceDisplay(goods.computedprice) }}</div>
                <div>{{ goods.count }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="item-td">{{ state.order.sellVos.length }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-td">{{ $numberPriceDisplay(state.order.totalPrice) }}</div>
        </el-col>
        <el-col :span="2">
          <div class="item-td">{{ state.order.consignorName || '-' }}</div>
        </el-col>
        <el-col :span="2">
          <div class="item-td">{{ state.order.stateDisplay }}</div>
        </el-col>
        <el-col :span="2">
          <div class="item-td">{{ state.order.typeDisplay }}</div>
        </el-col>
      </el-row>
    </div>
    <el-form :model="state.formData" :rules="state.formRules" size="large" ref="formRef">
      <el-form-item label="退款ID" prop="id" v-show="false"></el-form-item>
      <el-form-item label="反馈描述" prop="describe">
        <el-input v-model="state.formData.describe" type="textarea" placeholder="请输入原因描述" />
      </el-form-item>
      <el-form-item label="反馈图片" prop="pics">
        <custom-image-upload style="width: 100%" v-model="state.formData.pics" :limit="10" :file-size="2"
          tip="请上传相关反馈图片"></custom-image-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="bottom-btns" style="flex: 1">
        <el-button plain style="height: 46px;padding: 12px 37px;" :loading="state.isSave" @click="handleClose">{{
          cancelButtonText
        }}</el-button>
        <el-button style="height: 46px;padding: 12px 37px;" v-for="(b, i) in state.buttonList" :loading="state.isSave"
          :key="'btn' + i" :color="b.color" :type="b.type || 'default'" :disabled="b.disabled" @click="b.command">{{
            b.label
          }}</el-button>
      </div>
    </template>
  </custom-dialog>
</template>
<script setup name="confirmForm">
import { appOrderOverPost } from '@/api/order'
import { nextTick } from 'vue';
const { proxy } = getCurrentInstance()
const props = defineProps({
  cancelButtonText: {
    type: String,
    default: '返回'
  },
  center: Boolean,
  disabled: Boolean,
  width: {
    type: String,
    default: '1200px'
  },
  customTitle: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['change', 'init'])
const state = reactive({
  order: {},
  formData: { // appOrderOverPost 请求参数对象
    describe: '', // 反馈描述 string-query
    id: '', // 订单ID string-query
    pics: '' // 反馈图片 多个逗号分隔 string-query
  },
  formRules: {
    describe: [{ required: true, message: '请输入反馈描述', trigger: 'blur' }],
    pics: [{ required: true, message: '请上传反馈图片', trigger: ['change', 'blur'] }]
  },
  isVisible: false,
  isSave: false,
  buttonList: [
    {
      label: '反馈',
      disabled: false,
      color: '#D6000F',
      command: () => {
        formRef.value.validate((valid) => {
          if (valid) {
            state.isSave = true
            appOrderOverPost({ body: state.formData }).then(() => {
              proxy.$modal.msgSuccess('反馈成功')
              bindChange(true)
            }).catch(() => {
              proxy.$modal.msgError('反馈失败,请稍后重试')
            }).finally(() => {
              state.isSave = false
            })
          }
        })
      }
    }
  ],
  initDefault: true
})
const isVisible = ref(false)
const computedTitle = computed(() => props.customTitle || '订单反馈')

const formRef = ref(null)

function handleClose () {
  isVisible.value = false
  resetFields()
}
function bindChange (e) {
  emit('change', e)
  e && handleClose()
}

function bindFormInfo (e) {
}
function setDefault (e, order) {
  state.initDefault = false
  state.order = order
  for (const key in e) {
    if (Object.hasOwnProperty.call(state.formData, key)) {
      state.formData[key] = e[key]
    }
  }
  nextTick(() => {
    state.initDefault = true
    isVisible.value = true
  })
}
function resetFields () {
  if (formRef.value) {
    formRef.value.resetFields()
    nextTick(() => {
      formRef.value.$nextTick(() => {
        formRef.value.clearValidate()
        state.initDefault = false
      })
    })
  }
}
defineExpose({
  bindFormInfo,
  setDefault,
  resetFields,
  show: () => {
    isVisible.value = true
  }
})
</script>
<style lang="scss" scoped>
.order {
  margin-bottom: 20px;

  &-box {
    min-height: 220px;
  }

  &-header {
    margin-left: -5px;
    margin-right: -5px;
    padding: 11px 15px;
    background: #F8F8F8;
    border: 1px solid #EBEBEB;
  }

  &-info {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    color: #323232;
    line-height: 19px;
  }

  &-shop__img {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-shop__title {
    margin-left: 10px;
  }

  &-time {
    margin-left: 10px;
  }

  &-number {
    margin-left: 10px;
    color: #666666;
  }

  &-body {
    border: 1px solid #EBEBEB;

    .item-td {
      font-size: 18px;
      color: #666666;
      line-height: 24px;
      text-align: center;
      padding: 19px 0;

      &.goods-list {
        padding-left: 14px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }

      .goods-info {
        width: 130px;
        height: 130px;
        background: #FFFFFF;
        border: 1px solid #EBEBEB;
        position: relative;

        &~.goods-info {
          margin-left: 10px;
        }
      }

      .goods-other {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 0 5px;
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>
